<template>
  <div class="my-border">
    <el-card class="stats-card" style="height: 140px;"> <!-- 减小卡片的上下长度 -->
      <div class="stats-row">
        <div class="stats-item">
          <p class="stats-label">已提交反馈总数</p>
          <p class="stats-value">{{totalFeekback}}</p>
        </div>
        <div class="stats-dotted-line"></div> <!-- 虚线分割 -->
        <div class="stats-item">
          <p class="stats-label">反馈活动总数</p>
          <p class="stats-value">{{numOfACTinFeekback}}</p>
        </div>
        <div class="stats-dotted-line2"></div> <!-- 虚线分割 -->
        <div class="stats-item">
          <p class="stats-label">未查看</p>
          <p class="stats-value">{{uncheckedFeekback}}</p>
        </div>
        <div class="stats-dotted-line3"></div> <!-- 虚线分割 -->
        <div class="stats-item">
          <p class="stats-label">已查看</p>
          <p class="stats-value">{{checkedFeekback}}</p>
        </div>
      </div>
    </el-card>

    <div class="allfeekback-entry">
      <div class="entry-wrapper">
        <el-card class="custom-card" style="margin-top: 20px;">
          <div style="display: flex; justify-content: center;">
            <el-button type="text" style="font-size: 25px;margin-top: 130px; color: black; font-weight: bold;" @click="trunIntoOnline()">点此查看反馈详情</el-button>
          </div>
        </el-card>
      </div>

      <el-card class="hot-activities" style="margin-top: 20px;">
        <div style="display: flex; align-items: center;">
          <div id="myChart" style="width: 100%;height: 300px;"></div>
        </div>
      </el-card>

      <!-- 反馈缩略查看 -->
      <el-card class="rank-card" style="margin-top: 20px; text-align: center;">
        <!--        <h3 style="margin-top: -10px">未查看反馈</h3>-->
        <!--        <el-divider style="background-color: transparent !important;"></el-divider>-->
        <!--        <div style="max-height: 300px; overflow-y: auto;">-->
        <!--          <el-table :data="tableData"-->
        <!--                    tooltip-effect="dark"-->
        <!--                    style="width: 100%; margin-top: 10px">-->
        <!--            <el-table-column prop="id"    label="反馈id" v-if="false"></el-table-column>-->
        <!--            <el-table-column fixed    prop="createTime"    label="反馈创建时间">-->
        <!--              <template slot-scope="scope">-->
        <!--                <span>{{scope.row.createTime.substring(0, 10)}}</span>-->
        <!--              </template>-->
        <!--            </el-table-column>-->
        <!--            <el-table-column prop="aid"    label="反馈活动id" v-if="false"></el-table-column>-->
        <!--            <el-table-column prop="aname"    label="反馈活动名称">-->
        <!--              <template slot-scope="scope">-->
        <!--                <span v-if="activities.length>0">{{getActivityName(scope.row.aid)}}</span>-->
        <!--              </template>-->
        <!--            </el-table-column>-->
        <!--            <el-table-column prop="description"    label="反馈内容" :show-overflow-tooltip="true" v-if="false"></el-table-column>-->
        <!--            <el-table-column prop="status"    label="反馈查看状态" v-if="false"></el-table-column>-->
        <!--          </el-table>-->
        <!--        </div>-->
        <div style="display: flex; align-items: center;">
          <div id="myChart2" style="width: 100%;height: 300px;"></div>
        </div>
      </el-card>

    </div>
  </div>
</template>

<script>
import {
  getAllActivity1,
  getAllByPage, getAllFeekback,
  getNameByUid, getNameByAid, updateStatus1, searchByStatus1
} from '../../../../api/feekback'
import {mapGetters} from 'vuex'
import * as echarts from 'echarts'

export default {
  name: 'allfeekbacklist',
  inject: ['reload'],
  data () {
    return {
      params: {
        page: 1,
        size: 5,
        total: 100
      },
      pageSizes: [5, 8, 10, 20],
      activities: [],
      tableData: [],
      feekbackList: [],
      account: '',
      name: '',
      activity: {
        name: '',
        type: ''
      }
    }
  },
  computed: {
    ...mapGetters({
      userType: 'user/getUserRole',
      userAccount: 'user/getUserAccount',
      userId: 'user/getUserId'
    }),
    roleName () {
      return this.getRoleName(this.userType)
    },
    statuses () {
      return [
        {value: '0', label: '未查看'},
        {value: '1', label: '已查看'}
      ]
    },
    totalFeekback () {
      return this.feekbackList.length
    },
    checkedFeekback () {
      return this.feekbackList.filter(data => data.status === 1).length
    },
    uncheckedFeekback () {
      return this.feekbackList.filter(data => data.status === 0).length
    },
    numOfACTinFeekback () {
      let lists = this.feekbackList
      let property = new Set()
      for (let i = 0; i < lists.length; i++) {
        let list = lists[i]
        if (list.hasOwnProperty('aid')) {
          property.add(list['aid'])
        }
      }
      return property.size
    }
  },
  methods: {
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      this.params.size = val
      if (this.methodSelect === 1) {
        this.findAllByPage()
      } else {
        this.search()
      }
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.params.page = val
      if (this.methodSelect === 1) {
        this.findAllByPage()
      } else {
        this.search()
      }
    },
    trunIntoOnline () {
      this.$router.push('allfeekbacks')
    },
    getActivityName (aid) {
      const activity = this.activities.find(activity => activity.id === aid)
      return activity ? activity.name : ''
    },
    findAllByPage () {
      this.page = true
      getAllByPage(this.params.page, this.params.size).then((res) => {
        this.tableData = res.data
        this.params.total = res.total
      })
    },
    updateStatus () {
      updateStatus1(this.fid)
      this.dialogVisible = false
      this.reload()
    },
    search () {
      this.methodSelect = 0
      searchByStatus1(this.selectedStatus, this.params.page, this.params.size).then((res) => {
        this.tableData = res.data
        this.params.total = res.total
      })
    },
    getAllActivity () {
      getAllActivity1().then((res) => {
        this.activities = res
      })
    },
    getAllFeekback () {
      let feekback1 = []
      getAllFeekback().then((res) => {
        const promises = res.map((item) => {
          return getNameByUid(item.uid).then((name) => {
            item.uname = name
            return item
          })
        })
        return Promise.all(promises)
      }).then((updatedres) => {
        feekback1 = updatedres
        const actPromises = feekback1.map((item) => {
          return getNameByAid(item.aid).then((aname) => {
            item.aname = aname
            return item
          })
        })
        return Promise.all(actPromises)
      }).then((lastList) => {
        this.feekbackList = lastList
        console.log(this.feekbackList)
        this.initData()
        this.initData2()
      })
    },
    initData () {
      let obj = echarts.init(document.getElementById('myChart'))
      // 静态数据，模拟活动数量
      let activityData = [this.totalFeekback, this.numOfACTinFeekback, this.uncheckedFeekback, this.checkedFeekback]

      // 使用静态数据设置横轴时间
      let timeData = ['已提交反馈总数', '反馈活动总数', '未查看反馈数', '已查看反馈数']

      let option = {
        title: {
          text: '反馈组成', // 标题为“反馈组成”
          left: 'center' // 居中显示
        },
        xAxis: {
          type: 'category',
          data: timeData,
          axisLabel: {
            interval: 0, // 横轴间隔设置为0，显示全部
            rotate: 45 // 横轴标签旋转45度方便展示
          }
        },
        yAxis: {
          type: 'value',
          min: 0, // 竖轴最小值
          max: Math.ceil(this.totalFeekback * 1.1),
          interval: Math.ceil((this.totalFeekback / 8))
        },
        series: [
          {
            data: activityData,
            type: 'bar'
          }
        ]
      }

      obj.setOption(option)
    },

    initData2 () {
      let obj = echarts.init(document.getElementById('myChart2'))
      // 使用统计的数据更新饼状图的内容
      let option = {
        title: {
          text: '反馈组成比例',
          subtext: '我的反馈',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '45%',
            data: [
              { value: this.uncheckedFeekback, name: '未查看反馈' },
              { value: this.checkedFeekback, name: '已查看反馈' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      obj.setOption(option)
    }
  },

  created () {
    this.findAllByPage()
    this.getAllFeekback()
    this.getAllActivity()
  }
}
</script>

<style scoped>

.allfeekback-entry {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}
.entry-wrapper {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1;
}
.rank-card {
  width: 400px ;
  padding: 10px;
  height: 400px;
  border-radius: 8px;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1);
  background-color: #f5f7fa;
  color: #495060;
}
/*最外层透明*/
/deep/ .el-table, /deep/ .el-table__expanded-cell{
  background-color: transparent;
}
/* 表格内背景颜色 */
/deep/ .el-table th,
/deep/ .el-table tr,
/deep/ .el-table td {
  background-color: transparent;
}

.el-table::before {//去除底部白线
left: 0;
  bottom: 0;
  width: 100%;
  height: 0px;
}
/* 样式可以根据实际需求进行调整 */
.custom-card {
  width: 300px; /* 让卡片占据一半的宽度，考虑间距 */
  padding: 20px;
  height: 380px;
  border-radius: 8px;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1);
  background-color: #f5f7fa;
  color: #495060;
}
.my-border {
  padding: 10px;
}
.stats-card {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 10px 20px; /* 减小卡片的上下长度 */
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1);
  background-color: #f5f7fa;
}

.stats-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 200px; /* 调整字段之间的间距 */
  position: relative;
}

.stats-item {
  text-align: center;
}

/* 新增样式用于虚线 */
.stats-dotted-line {
  position: absolute;
  height: 100%;
  width: 1px; /* 虚线的宽度 */
  background-image: linear-gradient(to bottom, black 20%, rgba(255, 255, 255, 0) 0%);
  background-position: 50%;
  background-size: 1px 10px; /* 控制虚线的高度和间距 */
  background-repeat: repeat-y;
  top: 0;
  bottom: 0;
  left: calc(20% + 43px); /* 将虚线置于两字段之间的中间位置 */
}

.stats-dotted-line2 {
  position: absolute;
  height: 100%;
  width: 1px; /* 虚线的宽度 */
  background-image: linear-gradient(to bottom, black 20%, rgba(255, 255, 255, 0) 0%);
  background-position: 50%;
  background-size: 1px 10px; /* 控制虚线的高度和间距 */
  background-repeat: repeat-y;
  top: 0;
  bottom: 0;
  left: calc(50% + 63px); /* 将虚线置于两字段之间的中间位置 */
}
.stats-dotted-line3 {
  position: absolute;
  height: 100%;
  width: 1px; /* 虚线的宽度 */
  background-image: linear-gradient(to bottom, black 20%, rgba(255, 255, 255, 0) 0%);
  background-position: 50%;
  background-size: 1px 10px; /* 控制虚线的高度和间距 */
  background-repeat: repeat-y;
  top: 0;
  bottom: 0;
  left: calc(80% + 43px); /* 将虚线置于两字段之间的中间位置 */
}
.stats-label {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px; /* 调整字段与数字之间的间距 */
}

.stats-value {
  font-size: 32px;
  font-weight: bold;
}
.hot-activities {
  width: 400px; /* 让卡片占据一半的宽度，考虑间距 */
  padding: 20px;
  height: 380px;
  border-radius: 8px;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1);
  background-color: #f5f7fa;
  color: #495060;
  /* 添加左右边距 */
  margin-left: 20px;
  margin-right: 20px;
}
/deep/ .el-table__header{
  background-color: transparent;
}
.el-table__header{
  background-color: transparent;
}
</style>
